<!doctype html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Captain Chen">
    <meta name="Keywords" content="web chat">
    <title>Code Walker Login</title>
    <link rel="stylesheet" href="./static/login.css">
    <script src="./static/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            state = $("#login_state").text();
            $("#check_name_status").addClass("hideIt").removeClass("lightIt");
            $("#check_password").addClass("hideIt").removeClass("lightIt");
            if (state == "user-not-exist")
                $("#check_name_status").addClass("lightIt").removeClass("hideIt");
            else if (state == "password-error")
                $("#check_password").addClass("lightIt").removeClass("hideIt");
        });
    </script>
</head>

<body style="background-color:#f6f8fb">
    <h1 style="padding:50px;color: #1e7db9;">Code Walker</h1>
    <div id="login_state" style="display:none">{{login_state}}</div>
    <div class="login_box">
        <div style="width: 100%;height: 38px;font-size: 22px;margin: 25px 0 20px 0;">登录</div>
        <form action="/login" method="post">
            <div style="margin-bottom: 22px;">
                <input id="user-name" type="text" name="user-name" autocomplete="off" placeholder="用戶名" maxlength="20"
                    class="input_box">
                <span id="check_name_status" class="hideIt">用户名不存在</span>
            </div>
            <div style="margin-bottom: 22px;">
                <input id="password" type="password" name="password" autocomplete="off" placeholder="密码" maxlength="16"
                    class="input_box">
                <span id="check_password" class="hideIt">密码错误！</span>
            </div>
            <div style="margin-bottom: 22px;">
                <button id="submit-button" type="submit" class="button blue">
                    <span>立即登录</span>
                </button>
            </div>
            <a href="/register" style="color:#409eff; text-decoration: none">
                <span>还没有账号？立即注册 </span>
            </a>
        </form>
    </div>
    </div>

</body>

</html>